<link rel="stylesheet" href="<?php echo base_url() ?>assets/css/dashboard/compose.css">	
<link rel="stylesheet" href="<?php echo base_url() ?>assets/css/magnific-popup.css">
<link rel="stylesheet" href="<?php echo base_url() ?>assets/css/redactor.css">

<script type="text/javascript" src="<?php echo base_url() ?>assets/js/jquery.magnific-popup.js"></script>

<script type="text/javascript" src="<?php echo base_url() ?>assets/js/redactor.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>assets/js/redactor.plugin.table.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>assets/js/redactor.plugin.fontsize.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>assets/js/redactor.plugin.fontcolor.js"></script>

<script type="text/javascript" src="<?php echo base_url() ?>assets/js/sly.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>assets/js/sly-plugins.js"></script>

<script type="text/javascript" src="<?php echo base_url() ?>assets/js/pages/compose.js"></script>

<div class="page-title">
	<div class="wrapper">
		<h1>{{pageTitle}}</h1>
	</div>
</div>
<div class="wrapper">
	<form action="" class="form-horizontal" role="form">
		<div class="panel panel-default">

			<div class="panel-heading">
				Trình soạn thảo bài học
			</div>

			<div class="panel-body">
				<div class="cat-zone" ng-hide="typeCompose=='place'">
					<label for="">Chọn thời kỳ lịch sử: </label> &nbsp; 
					<input type="checkbox" value="1" ng-model="isVn"> LS Việt Nam
					<select id="select-cat" class="category form-control" ng-model="category">
						<option ng-repeat="cat in categories | catFilter:isVn" value="{{cat._id}}">{{cat.name}}</option>
					</select> <br> 
					<p ng-show="typeCompose=='person'">
						<button class="btn btn-success btn-xs" ng-click="addPsCats()">+</button>
					</p>
				</div>

				<div class="person-zone" ng-show="typeCompose=='person'">
					<p><strong>Các thời kỳ</strong></p>
					<ul class="list-cat">
						<li ng-repeat="cat in psListCat">
							{{cat.name}}
						</li>
					</ul>
				</div>
				<hr>
				<label for="input-title" class="control-label">Tiêu đề</label>
				<input id="input-title" type="text" class="form-control" ng-model="lsTitle">
				<br>
				<div class="region-zone" ng-show="typeCompose=='place'||typeCompose=='person'">
					<input type="radio" ng-model="refRegion" value="vn"> VN &nbsp; &nbsp; | &nbsp; &nbsp;
					<input type="radio" ng-model="refRegion" value="wo"> TG
				</div>
				<div class="avatar-zone" ng-show="typeCompose=='place'||typeCompose=='person'">
					<p>Hình đại diện</p>
					<input type="text" class="form-control" ng-model="refImage">
				</div>
				<br>
				<div class="born-dead-zone" ng-show="typeCompose=='person'">
					<div class="col-sm-6">
						Ngày/Năm sinh: <input type="text" class="form-control" ng-model="psDate.born">
					</div>
					<div class="col-sm-6">
						Ngày/Năm mất:
						<input type="text" class="form-control" ng-model="psDate.dead">
					</div>
				</div>
				<div class="location-zone" ng-show="typeCompose=='place'">
					<div class="col-sm-6">
						LatLng: <input type="text" class="form-control" ng-model="plLocal">
					</div>
				</div>
				
				<!-- <div id="editor-page" class="editor-page form-control" contenteditable="{{!viewIndex}}">

				</div> -->
				<div class="clearfix"></div> <br>
				<div class="row">
					<div class="container">
						<div class="btn btn-info btn-xs import-elements" data-toggle="modal" data-target="#importImage">Thêm Ảnh</div>
						<div class="btn btn-info btn-xs import-elements" data-toggle="modal" data-target="#importVideo">Thêm Video</div>
						<div class="btn btn-info btn-xs import-elements" data-toggle="modal" data-target="#importMap">Thêm Bản đồ</div>
						<div class="btn btn-info btn-xs import-elements" data-toggle="modal" data-target="#importReference">Bài liên quan</div>
						<!-- <div class="btn btn-danger btn-xs" ng-click="testCursor()"></div> -->
					</div>
				</div> <br>
				<textarea name="" id="redactor-content" cols="30" rows="80"></textarea>
				
				<input type="checkbox" ng-model="viewIndex"> Xem số đoạn văn (không chỉnh sửa văn bản được);
				<!-- ================================ -->

				<div class="create-timeline" ng-show="typeCompose == 'lesson'">
					<h2>DÒNG THỜI GIAN</h2>
					<ul class="timeline-list">
						<li ng-repeat="node in timelineList track by $index">
							Mốc thời gian: {{node.time}} <br>
							Đoạn văn: {{node.paragraph}} <br>
							Bản đồ: {{node.maps}} <br>
							[{{$index}}] &nbsp; - &nbsp;
							<span class="node-btn glyphicon glyphicon-remove text-danger" ng-click="deleteTlNode($index)"></span>
						</li>
					</ul>
					<br>
					<div class="btn btn-success btn-sm pull-right" data-toggle="modal" data-target="#addTimeline">Thêm mốc TG</div>
				</div>

				<div class="questions-panel" ng-show="typeCompose=='lesson'">
					<h2>CÂU HỎI LIÊN QUAN</h2>
					<ul class="question-list timeline-list">
						<li ng-repeat="question in questionList track by $index">
							Câu hỏi: {{question.question}} <br>
							[{{$index}}] &nbsp; - &nbsp;
							<span class="node-btn glyphicon glyphicon-remove text-danger" ng-click="deleteQuestion($index)"></span>
						</li>
					</ul>
					<br>
					<div class="btn btn-success btn-sm pull-right" data-toggle="modal" data-target="#importQuestion">Thêm câu hỏi</div>
				</div>

				<div class="events-panel" ng-show="typeCompose=='lesson'">
					<h2>SỰ KIỆN LIÊN QUAN</h2>
					<ul class="event-list timeline-list">
						<li ng-repeat="event in eventList track by $index">
							Sự kiện: {{event.eventName}} <br>
							[{{$index}}] &nbsp; - &nbsp;
							<span class="node-btn glyphicon glyphicon-remove text-danger" ng-click="deleteEvent($index)"></span>
						</li>
					</ul>
					<br>
					<div class="btn btn-success btn-sm pull-right" data-toggle="modal" data-target="#importEvent">Thêm sự kiện</div>
				</div>
			</div>

			<div class="panel-footer">
				<button class="btn btn-primary" ng-click="addArticle()" ng-show="create"><strong>THÊM BÀI</strong></button>
				<button class="btn btn-primary" ng-click="editArticle()" ng-hide="create"><strong>CHỈNH SỬA BÀI</strong></button>
				<button class="btn btn-warning" ng-click="viewContent()" data-toggle="modal" data-target="#viewContent">
					<strong>XEM NỘI DUNG</strong>
				</button>
			</div>
		</div>
	</form>
</div>

<!-- ===================== -->
<div id="importImage" class="modal fade" role="dialog" aria-labelledby="" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">&times;</span>
					<span class="sr-only">Close</span>
				</button>
				<h4 class="modal-title">Chèn hình ảnh</h4>
			</div>
			<div class="modal-body">
				<label for="">Đường dẫn: </label>
				<input ng-model="imgUrl" id="input-video" type="text" class="form-control">
				<br>
				<label for="">Chú thích: </label>
				<input type="text" ng-model="imgDescription" class="form-control">
				<br>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Bỏ qua</button>
				<button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="importImage()">Đồng ý</button>
			</div>
		</div>
	</div>
</div>

<!-- ===================== -->
<div id="importVideo" class="modal fade" role="dialog" aria-labelledby="" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">&times;</span>
					<span class="sr-only">Close</span>
				</button>
				<h4 class="modal-title">Chèn Video</h4>
			</div>
			<div class="modal-body">
				<input ng-model="popup.videoId" id="input-video" type="text" class="form-control" disabled="disabled">
				<br>
				<input type="text" ng-model="searchVideo" class="form-control" placeholder="Tìm kiếm từ khóa">
				<br>
				<div class="scrollbar">
					<div class="handle"></div>
				</div>
				<div class="" id="videos-list">
					<ul class="list slidee">
						<li ng-repeat="video in videoList | filter:searchVideo">
							<p class="id">{{video._id}}</p>
							<a class="youtube-popup" href="http://www.youtube.com/watch?v={{video._id}}">
								<img class="thumb" src="http://img.youtube.com/vi/{{video._id}}/hqdefault.jpg" alt="">
							</a>
							<div class="info">
								<p class="name">{{video.description}}</p>
							</div>
						</li>
					</ul>
				</div>
				<div class="controls">
					<span class="btn btn-default prevPage"><span class="glyphicon glyphicon-step-backward"></span></span>
					<span class="btn btn-default prev"><span class="glyphicon glyphicon-chevron-left"></span></span>
					<span class="btn btn-default next"><span class="glyphicon glyphicon-chevron-right"></span></span>
					<span class="btn btn-default nextPage"><span class="glyphicon glyphicon-step-forward"></span></span>

					<span class="btn btn-danger add-video" data-toggle="modal" data-target="#addVideo">
						<span class="glyphicon glyphicon-plus"></span>
					</span>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Bỏ qua</button>
				<button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="importVideo(popup.videoId)">Đồng ý</button>
			</div>
		</div>
	</div>
</div>

<!-- =============================================================================== -->
<div id="importMap" class="modal fade" role="dialog" aria-labelledby="" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">&times;</span>
					<span class="sr-only">Close</span>
				</button>
				<h4 class="modal-title">Chèn bản đồ</h4>
			</div>
			<div class="modal-body">
				<div id="popup-map">
					
				</div>
				<br>
				<input ng-model="popup.mapId" type="text" class="form-control" disabled="disabled">
				<br>
				<input type="text" ng-model="searchMap" class="form-control" placeholder="Tìm kiếm từ khóa">
				<br>
				<div class="scrollbar">
					<div class="handle"></div>
				</div>
				<div class="" id="maps-list">
					<ul class="list slidee">
						<li ng-repeat="map in mapList | filter:searchMap">
							<p class="id">{{map._id}}</p>
							<img src="<?php echo base_url() ?>assets/images/maps-img.png" alt="">
							<div class="info">
								<p class="name">{{map.description}}</p>
							</div>
						</li>
					</ul>
				</div>
				<div class="controls">
					<span class="btn btn-default prevPage"><span class="glyphicon glyphicon-step-backward"></span></span>
					<span class="btn btn-default prev"><span class="glyphicon glyphicon-chevron-left"></span></span>
					<span class="btn btn-default next"><span class="glyphicon glyphicon-chevron-right"></span></span>
					<span class="btn btn-default nextPage"><span class="glyphicon glyphicon-step-forward"></span></span>
				</div>

			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Bỏ qua</button>
				<button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="importMap(popup.mapId)">Đồng ý</button>
			</div>
		</div>
	</div>
</div>

<!-- =============================================================================== -->
<div id="importQuestion" class="modal fade" role="dialog" aria-labelledby="" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">&times;</span>
					<span class="sr-only">Close</span>
				</button>
				<h4 class="modal-title">Chèn câu hỏi liên quan</h4>
			</div>
			<div class="modal-body">
				<br>
				<input ng-model="popup.questionId" type="text" class="form-control" disabled="disabled">
				<br>
				<input type="text" ng-model="searchQuestion.question" class="form-control" placeholder="Tìm kiếm từ khóa">
				<br>
				<div class="scrollbar">
					<div class="handle"></div>
				</div>
				<div class="" id="pu-questions-list">
					<ul class="list slidee">
						<li ng-repeat="question in dbQuestionList | filter:searchQuestion">
							<span class="id">{{question._id}}</span>
							<p class="question">{{question.question}}</p>
						</li>
					</ul>
				</div>
				<div class="controls">
					<span class="btn btn-default prevPage"><span class="glyphicon glyphicon-step-backward"></span></span>
					<span class="btn btn-default prev"><span class="glyphicon glyphicon-chevron-left"></span></span>
					<span class="btn btn-default next"><span class="glyphicon glyphicon-chevron-right"></span></span>
					<span class="btn btn-default nextPage"><span class="glyphicon glyphicon-step-forward"></span></span>

					<span class="btn btn-danger add-video" data-toggle="modal" data-target="#addQuestion">
						<span class="glyphicon glyphicon-plus"></span>
					</span>
				</div>

			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Bỏ qua</button>
				<button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="importQuestion(popup.questionId)">Đồng ý</button>
			</div>
		</div>
	</div>
</div>

<!-- =============================================================================== -->
<div id="importEvent" class="modal fade" role="dialog" aria-labelledby="" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">&times;</span>
					<span class="sr-only">Close</span>
				</button>
				<h4 class="modal-title">Chèn sự kiện liên quan</h4>
			</div>
			<div class="modal-body">
				<br>
				<input ng-model="popup.eventId" type="text" class="form-control" disabled="disabled">
				<br>
				<input type="text" ng-model="searchEvent" class="form-control" placeholder="Tìm kiếm từ khóa">
				<br>

				<ul class="list slidee">
					<li ng-repeat="event in dbEventList | filter:searchEvent" ng-click="popup.eventId = event._id.$id">
						<span class="id">{{event._id.$id}}</span>
						<p class="event">{{event.eventName}}</p>
					</li>
				</ul>

			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Bỏ qua</button>
				<button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="importEvent(popup.eventId)">Đồng ý</button>
			</div>
		</div>
	</div>
</div>

<!-- ===================== -->
<div id="importReference" class="modal fade" role="dialog" aria-labelledby="" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">&times;</span>
					<span class="sr-only">Close</span>
				</button>
				<h4 class="modal-title">Chèn bài viết liên quan</h4>
			</div>
			<div class="modal-body">
				<input ng-model="popup.referId" id="input-refer" type="text" class="form-control" disabled="disabled">
				<br>
				<input type="text" ng-model="searchRefer" class="form-control" placeholder="Tìm kiếm từ khóa">
				<br>

				<div class="place-z">
					<h3>Di tích bảo tàng</h3>
					<div class="scrollbar">
						<div class="handle"></div>
					</div>
					<div class="reference-list" id="places-list">
						<ul class="list slidee">
							<li ng-repeat="refer in placeList | vnSort:'title' | simpleFilter:searchRefer:'title'">
								<p class="id">reference/{{refer._id.$id}}</p>
								<div class="info">
									<p class="name">{{refer.title}}</p>
								</div>
							</li>
						</ul>
					</div>
				</div>

				<div class="person-z">
					<h3>Danh nhân lịch sử</h3>
					<div class="scrollbar">
						<div class="handle"></div>
					</div>
					<div class="reference-list" id="person-list">
						<ul class="list slidee">
							<li ng-repeat="refer in personList | vnSort:'title' | simpleFilter:searchRefer:'title'">
								<p class="id">reference/{{refer._id.$id}}</p>
								<div class="info">
									<p class="name">{{refer.title}}</p>
								</div>
							</li>
						</ul>
					</div>
				</div>

				<div class="article-z">
					<h3>Bài viết liên quan</h3>
					<div class="scrollbar">
						<div class="handle"></div>
					</div>
					<div class="reference-list" id="article-list">
						<ul class="list slidee">
							<li ng-repeat="refer in articleList | vnSort:'title' | simpleFilter:searchRefer:'title'">
								<p class="id">lesson/{{refer._id}}</p>
								<div class="info">
									<p class="name">{{refer.title}}</p>
								</div>
							</li>
						</ul>
					</div>
				</div>

				<div class="controls">
					<span class="btn btn-default prevPage"><span class="glyphicon glyphicon-step-backward"></span></span>
					<span class="btn btn-default prev"><span class="glyphicon glyphicon-chevron-left"></span></span>
					<span class="btn btn-default next"><span class="glyphicon glyphicon-chevron-right"></span></span>
					<span class="btn btn-default nextPage"><span class="glyphicon glyphicon-step-forward"></span></span>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Bỏ qua</button>
				<button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="importReference(popup.referId, popup.referName)">Đồng ý</button>
			</div>
		</div>
	</div>
</div>

<!-- =============================================================================== -->
<div id="addVideo" class="modal fade" role="dialog" aria-labelledby="" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<form action="" role="form" ng-submit="addVideo()">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">&times;</span>
						<span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title">Tạo video mới</h4>
				</div>
				<div class="modal-body">
					<label for="">Chọn thời kỳ lịch sử: </label> &nbsp; 
					<input type="checkbox" value="1" ng-model="popupIsVn"> LS Việt Nam
					<select class="category form-control" ng-model="addVideoForm.cat" required>
						<option ng-repeat="cat in categories | catFilter:popupIsVn" value="{{cat._id}}">{{cat.name}}</option>
					</select> <br />

					<label for="">Nhập id video từ trang youtube:</label>
					<input ng-model="addVideoForm._id" type="text" class="form-control" required >
					<label for="">Nhập tiêu đề cho video</label>
					<input ng-model="addVideoForm.description" type="text" class="form-control" required >

				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Bỏ qua</button>
					<input type="submit" class="btn btn-primary" value="Thêm">
				</div>
			</form>
		</div>
	</div>
</div>

<!-- ===================== -->
<div id="addTimeline" class="modal fade" role="dialog" aria-labelledby="" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">&times;</span>
					<span class="sr-only">Close</span>
				</button>
				<h4 class="modal-title">Thêm mốc thời gian</h4>
			</div>
			<div class="modal-body">
				<label for="">Tên thời gian: </label>
				<input ng-model="strTimeNode" id="input-video" type="text" class="form-control">
				<br>
				<label for="">Đoạn văn: </label>
				<input type="text" ng-model="paragraphList" class="form-control">
				<br>
				<input type="text" ng-model="popup.timelineMap" class="form-control" disabled="disabled">
				<br>
				
				<div class="input-group">
					<input type="text" ng-model="searchMap" class="form-control" placeholder="Nhập từ khóa hoặc nội dung tìm kiếm">
					<span class="input-group-btn">
						<button class="btn btn-default" type="submit">
							<span class="glyphicon glyphicon-search"></span>
						</button>
					</span>
				</div>

				<div class="scrollbar">
					<div class="handle"></div>
				</div>
				<div class="" id="timeline-maps-list">
					<ul class="list slidee">
						<li ng-repeat="map in mapList | filter:searchMap">
							<p class="id">{{map._id}}</p>
							<img src="<?php echo base_url() ?>assets/images/maps-img.png" alt="">
							<div class="info">
								<p class="name">{{map.description}}</p>
							</div>
						</li>
					</ul>
				</div>
				<div class="controls">
					<span class="btn btn-default prevPage"><span class="glyphicon glyphicon-step-backward"></span></span>
					<span class="btn btn-default prev"><span class="glyphicon glyphicon-chevron-left"></span></span>
					<span class="btn btn-default next"><span class="glyphicon glyphicon-chevron-right"></span></span>
					<span class="btn btn-default nextPage"><span class="glyphicon glyphicon-step-forward"></span></span>
				</div>
				<div id="timeline-map">
					
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Bỏ qua</button>
				<button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="addTimeNode()">Đồng ý</button>
			</div>
		</div>
	</div>
</div>

<!-- =============================================================================== -->
<div id="addQuestion" class="modal fade" role="dialog" aria-labelledby="" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<form action="" role="form" ng-submit="addQuestion()">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">&times;</span>
						<span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title">Tạo câu hỏi mới</h4>
				</div>
				<div class="modal-body">
					<label for="">Chọn thời kỳ lịch sử: </label> &nbsp; 
					<input type="checkbox" value="1" ng-model="popupIsVn"> LS Việt Nam
					<select class="category form-control" ng-model="addQuestionForm.cat" required>
						<option ng-repeat="cat in categories | catFilter:popupIsVn" value="{{cat._id}}">{{cat.name}}</option>
					</select> <br />

					<label for="">Nhập câu hỏi:</label>
					<input ng-model="addQuestionForm.question" type="text" class="form-control" required >
					<label for="">Trả lời</label>
					<textarea class="form-control" rows="3" ng-model="addQuestionForm.answer"></textarea>

				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Bỏ qua</button>
					<input type="submit" class="btn btn-primary" value="Thêm">
				</div>
			</form>
		</div>
	</div>
</div>

<!-- =============================================================================== -->
<div id="viewContent" class="modal fade" role="dialog" aria-labelledby="" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">&times;</span>
					<span class="sr-only">Close</span>
				</button>
				<h4 class="modal-title">Lấy nội dung</h4>
			</div>
			<div class="modal-body">
				<textarea class="form-control" id="viewContentArea" cols="30" rows="10"></textarea>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-danger" data-dismiss="modal">Xong</button>
			</div>
		</div>
	</div>
</div>